<template>
  <div class="historybox">
    <mu-container>
      <mu-tabs :value.sync="active" inverse color="secondary" text-color="rgba(0, 0, 0, .54)" center>
        <mu-tab>收藏</mu-tab>
        <mu-tab>历史</mu-tab>
      </mu-tabs>
      <div class="demo-text" v-if="active === 0">
        <div class="collection flex flex-column">
          <div class='head'>
            <img src='./../../public/images/unload-girl.png'>
          </div>
          <span>亲，还未登录额</span>
        </div>
      </div>
      <div class="demo-text" v-if="active === 1">
        <div v-for="comic in comics" :key="comic.id">
          <div class="flex box">
            <div class="img">
              <router-link :to="{path:'/main/comicInfo',query:{comicId:comic.comicId}}">
                <img v-lazy:background-image='`https://image.mhxk.com/mh/${comic.comicId}.jpg-noresize.webp`' alt=""
                  :key='comic.comicId'>
              </router-link>
            </div>
            <div class="content flex">
              <router-link :to="{path:'/main/comicInfo',query:{comicId:comic.comicId}}">
                <div class="name flex flex-column">
                  <span>{{comic.name}}</span>
                  <p><small>{{comic.title}}</small></p>
                </div>
              </router-link>
              <div class="icon flex">
                <router-link :to="{path:'/main/read',query:{comicId:comic.comicId}}">
                  <div class="icon flex flex-column">
                    <i class="fa fa-eye"></i>
                    <small>续看</small>
                  </div>
                </router-link>
                <div @click='remove(comic.comicId)' class="remove flex flex-column">
                  <i class="fa icon fa-remove" aria-hidden="true"></i>
                  <small>移除</small>
                </div>
              </div>
            </div>
          </div>
        </div>
        <mh_recommend :data='recommend'></mh_recommend>
      </div>
    </mu-container>
  </div>
</template>
<style>
  @import 'history';

</style>
<script>
  import mh_recommend from './components/recommend';
  import blur from './components/blur/blur.vue';
  import tool from './../util/tool';
  export default {
    components: {
      mh_recommend,
      blur
    },
    data() {
      return {
        active: 1,
        mhvlf: null,
        comics: [],
        recommend: []
      };
    },
    mounted() {
      this.$http.get('http://y.yuduo.top/index/Manhua/recommend').then(res => {
        let result = res.status == 200 && res.data ? res.data : '';
        this.recommend = tool.shuffle(result).splice(0, 6);
      })
    },
    methods: {
      remove(comicId) {
        console.log(this.comics);
        this.comics.forEach((item, index) => {
          if (comicId == item.comicId) {
            this.comics.splice(index, 1);
          }
        })
        this.mhvlf.setItem('history', this.comics);
      },
      getLocal() {
        this.mhvlf.getItem('history').then(hisList => {
          this.comics = hisList;
        })
      },
    },
    created() {
      this.$vlf.createInstance({
        name: 'mh',
        storeName: 'comicInfo',
      }).then(vlf => {
        this.mhvlf = vlf;
        this.getLocal();
      });
      this.$nextTick(() => {})
    }
  };

</script>
